ওয়েব ডিজাইন (Web Design) হলো এমন একটি প্রক্রিয়া যার মাধ্যমে একটি ওয়েবসাইটের আকার, বিন্যাস, রং, ফন্ট, গ্রাফিক্স, এবং ইউজার ইন্টারফেস তৈরি করা হয়। এটি একটি ওয়েবসাইটকে ব্যবহারকারীর জন্য কার্যকরী, দৃষ্টিনন্দন, এবং সহজবোধ্য করে তোলে। ওয়েব ডিজাইনের প্রধান কাজ হলো ব্যবহারকারীদের অভিজ্ঞতা উন্নত করা এবং সাইটে নেভিগেশনকে সহজ করা। আধুনিক ওয়েব ডিজাইন শুধু ডেস্কটপের জন্যই নয়, মোবাইল এবং ট্যাবলেটের মতো অন্যান্য ডিভাইসের জন্যও গুরুত্বপূর্ণ।
ওয়েব ডিজাইনের মূল উপাদান:
১. লেআউট (Layout):
- লেআউট হলো ওয়েবসাইটের কাঠামো, যেখানে বিভিন্ন উপাদান যেমন হেডার, ফুটার, মেনু, এবং কন্টেন্ট রাখা হয়। এটি ওয়েবসাইটের সঠিক বিন্যাস এবং ব্যবহারকারীদের সহজে তথ্য খুঁজে পাওয়ার ব্যবস্থা করে।
২. গ্রাফিক্স (Graphics):
- ওয়েবসাইটে ব্যবহৃত ছবি, লোগো, এবং আইকনগুলোই গ্রাফিক্স। এগুলো ওয়েবসাইটকে দৃষ্টিনন্দন এবং তথ্যপূর্ণ করে তোলে।
৩. ফন্ট এবং রং (Fonts and Colors):
- ওয়েবসাইটে ব্যবহৃত ফন্ট এবং রং ওয়েবসাইটের দৃষ্টিনন্দনতা এবং ব্র্যান্ড পরিচিতি নির্ধারণ করে। এর মাধ্যমে ব্যবহারকারীর মনোযোগ আকর্ষণ করা হয়।
৪. ইউজার ইন্টারফেস (User Interface - UI):
- ওয়েবসাইটের ব্যবহারকারীর সাথে যোগাযোগের পদ্ধতিকে UI বলা হয়। এটি একটি ওয়েবসাইটকে কার্যকরী এবং ব্যবহারকারীদের জন্য সহজে নেভিগেট করার সুযোগ দেয়।
৫. রেসপনসিভ ডিজাইন (Responsive Design):
- রেসপনসিভ ডিজাইন হলো ওয়েবসাইটের এমন একটি ফিচার যা বিভিন্ন আকারের ডিভাইসে (ডেস্কটপ, মোবাইল, ট্যাবলেট) উপযুক্তভাবে প্রদর্শিত হয়।
HTML (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ):
HTML (Hypertext Markup Language) হলো ওয়েবসাইট তৈরি করার জন্য ব্যবহৃত একটি প্রাথমিক ভাষা। HTML মূলত ওয়েব পেজের স্ট্রাকচার বা কাঠামো তৈরি করে, যেখানে বিভিন্ন উপাদান যেমন টেক্সট, ইমেজ, এবং লিঙ্ক স্থাপন করা হয়। HTML ব্যবহার করে ওয়েবসাইটের বেসিক কাঠামো তৈরি করা হয়, যা ব্রাউজারকে নির্দেশ দেয় কীভাবে একটি ওয়েব পেজ প্রদর্শিত হবে।
HTML এর প্রধান উপাদানসমূহ:
১. ট্যাগ (Tag):
- HTML ট্যাগ হলো নির্দেশনা যা ব্রাউজারকে জানায় কীভাবে কন্টেন্ট প্রদর্শন করতে হবে। প্রতিটি HTML ট্যাগের শুরু এবং শেষ থাকে। উদাহরণ:
..., ...।
২. এলিমেন্ট (Element):
- HTML এলিমেন্ট হলো ট্যাগ এবং তার মধ্যে থাকা কন্টেন্ট। উদাহরণ:
এটি একটি প্যারাগ্রাফ
৩. অ্যাট্রিবিউট (Attribute):
- HTML অ্যাট্রিবিউট হলো ট্যাগের কিছু অতিরিক্ত তথ্য যা উপাদানের বৈশিষ্ট্য নির্ধারণ করে। উদাহরণ:
একটি সাধারণ HTML ডকুমেন্টের উদাহরণ:
আমার প্রথম ওয়েব পেজ
স্বাগতম!
এটি আমার প্রথম HTML পেজ।
উদাহরণটি একটি সাধারণ HTML পেজ দেখায়, যেখানে হেডারে একটি শিরোনাম </code> এবং বডিতে একটি প্রধান শিরোনাম <code><h1></code> এবং একটি প্যারাগ্রাফ <code><p></code> রয়েছে।</p><h3>HTML এর প্রধান ট্যাগসমূহ:</h3><p>১. <code><strong><html></strong></code>: HTML ডকুমেন্টের শুরু এবং শেষ নির্দেশ করে। ২. <code><strong><head></strong></code>: ডকুমেন্টের মেটাডেটা (যেমন শিরোনাম) ধারণ করে। ৩. <code><strong><title></strong></code>: ওয়েব পেজের টাইটেল নির্ধারণ করে, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়। ৪. <code><strong><body></strong></code>: HTML ডকুমেন্টের মূল কন্টেন্ট ধারণ করে। ৫. <code><strong><h1></strong></code><strong> থেকে </strong><code><strong><h6></strong></code>: বিভিন্ন স্তরের শিরোনাম তৈরি করে। <code><h1></code> সবচেয়ে বড় এবং <code><h6></code> সবচেয়ে ছোট। ৬. <code><strong><p></strong></code>: প্যারাগ্রাফ তৈরি করে। ৭. <code><strong><img></strong></code>: ইমেজ যোগ করার জন্য ব্যবহৃত হয়। ৮. <code><strong><a></strong></code>: হাইপারলিংক তৈরি করে, যা অন্য পেজ বা ওয়েবসাইটে নিয়ে যায়।</p><h3>সারসংক্ষেপ:</h3><p><strong>ওয়েব ডিজাইন</strong> হলো একটি প্রক্রিয়া যা ওয়েবসাইটের ভিজ্যুয়াল এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য কাজ করে, এবং <strong>HTML</strong> হলো সেই ভাষা যার মাধ্যমে ওয়েবসাইটের বেসিক স্ট্রাকচার তৈরি করা হয়। HTML ওয়েব ডিজাইনের ভিত্তি হিসেবে কাজ করে, যা CSS এবং JavaScript-এর মতো অন্যান্য প্রযুক্তি দিয়ে উন্নত করা যায়।</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-5 lg:grid-cols-2 xl:gap-10">
<div class="col-span-full">
<div class="flex flex-col">
<!-- Header Section -->
<div class="bg-gray-100 dark:bg-zinc-800 px-0 py-2 rounded-t-lg">
<div class="flex items-center justify-between px-4">
<h2 class="text-dark dark:text-gray-100 text-xl font-semibold">
Related Question
</h2>
<a href="https://sattacademy.com/all-mcq/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF"
class="inline-flex items-center gap-2 bg-white dark:bg-zinc-700 hover:bg-gray-50 dark:hover:bg-zinc-700 text-gray-900
dark:text-gray-100 px-2 py-1.5 rounded-lg transition-colors duration-200">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
<path d="M11 13l9 -9"></path>
<path d="M15 4h5v5"></path>
</svg>
View All
</a>
</div>
</div>
<!-- Question Cards -->
<div class="space-y-5">
<div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between flex-wrap overflow-x-auto scrollbar-hide">
<a href="https://sattacademy.com/mcq/html%E0%A6%8F%E0%A6%B0-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%95%E0%A7%80"
class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
1.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
<p>HTML-এর পূর্ণরূপ কী?</p>
</div>
</a>
<div class="flex items-center gap-0.5 ms-auto">
<span
title="3 বার পরীক্ষায় এসেছে"
class="flex items-center gap-0.5 cursor-default shrink-0"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
fill="currentColor"
class="text-amber-400">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
<span class="text-[11px] font-medium text-amber-600 dark:text-amber-400 leading-none whitespace-nowrap fs-7">3 Exams</span>
</span>
</div>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 2 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 3 weeks ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 3 weeks ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4" >
<li id="option-456542-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-456542-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Markup Language
</div>
</div>
</li>
<li id="option-456542-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-456542-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Makeup Language
</div>
</div>
</li>
<li id="option-456542-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-456542-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyperlinked Textual Mapping Language
</div>
</div>
</li>
<li id="option-456542-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-456542-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hierarchical Textual Markup Link
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-456542">
<a href="https://sattacademy.com/question-bank/psc-and-others/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%A1%E0%A6%BC%E0%A6%95-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%83%E0%A6%AA%E0%A6%95%E0%A7%8D%E0%A6%B7-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BE%E0%A6%B2%E0%A6%95-%E0%A6%87%E0%A6%9E%E0%A7%8D%E0%A6%9C%E0%A6%BF%E0%A6%A8%E0%A6%BF%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%82-28-05-2024/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ সড়ক পরিবহন কর্তৃপক্ষ — সহকারী পরিচালক (ইঞ্জিনিয়ারিং)">
BRTA – Assistant Director (Engg.)
</a>
<a href="https://sattacademy.com/question-bank/southeast-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক পিএলসি">
Southeast Bank
</a>
<a href="https://sattacademy.com/southeast-bank-ltd-officer-2008/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক - Officer">
Southeast Officer - 2008
</a>
<a href="https://sattacademy.com/question-bank/standard-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ইসলামী ব্যাংক পিএলসি">
Standard Bank
</a>
<a href="https://sattacademy.com/standard-bank-ltd-officer-2006/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ব্যাংক - Officer">
Standard Officer - 2006
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%A1%E0%A6%BC%E0%A6%95-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%83%E0%A6%AA%E0%A6%95%E0%A7%8D%E0%A6%B7-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BE%E0%A6%B2%E0%A6%95-%E0%A6%87%E0%A6%9E%E0%A7%8D%E0%A6%9C%E0%A6%BF%E0%A6%A8%E0%A6%BF%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%82-28-05-2024/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ সড়ক পরিবহন কর্তৃপক্ষ — সহকারী পরিচালক (ইঞ্জিনিয়ারিং)">
BRTA – Assistant Director (Engg.) - 2024
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%A1%E0%A6%BC%E0%A6%95-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%83%E0%A6%AA%E0%A6%95%E0%A7%8D%E0%A6%B7-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BE%E0%A6%B2%E0%A6%95-%E0%A6%87%E0%A6%9E%E0%A7%8D%E0%A6%9C%E0%A6%BF%E0%A6%A8%E0%A6%BF%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%82-28-05-2024/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">1.8k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between flex-wrap overflow-x-auto scrollbar-hide">
<a href="https://sattacademy.com/mcq/%E0%A6%AC%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%89%E0%A6%9C%E0%A6%BE%E0%A6%B0-%E0%A6%AF%E0%A6%A6%E0%A6%BF-%E0%A6%95%E0%A7%8B%E0%A6%A8%E0%A7%8B-%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A6%A3%E0%A7%87-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C-%E0%A6%B2%E0%A7%8B%E0%A6%A1-%E0%A6%95%E0%A6%B0%E0%A6%A4%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%B0%E0%A7%8D%E0%A6%A5-%E0%A6%B9%E0%A6%AF%E0%A6%BC-%E0%A6%A4%E0%A6%96%E0%A6%A8-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C%E0%A7%87%E0%A6%B0-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%87-%E0%A6%95%E0%A7%8B%E0%A6%A8-%E0%A6%9F%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%9F-"
class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
2.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
<p>ব্রাউজার যদি কোনো কারণে ইমেজ লোড করতে ব্যর্থ হয় তখন ইমেজের পরিবর্তে কোন টেক্সট প্রদর্শনের জন্য ব্যবহৃত এট্রিবিউট কোনটি?</p>
</div>
</a>
<div class="flex items-center gap-0.5 ms-auto">
</div>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 3 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 1 year ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 1 year ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4" >
<li id="option-251346-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-251346-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
src
</div>
</div>
</li>
<li id="option-251346-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-251346-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
title
</div>
</div>
</li>
<li id="option-251346-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-251346-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
alt
</div>
</div>
</li>
<li id="option-251346-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-251346-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
align
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-251346">
<a href="https://sattacademy.com/question-bank/psc-and-others/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BF%E0%A6%AE%E0%A6%BE%E0%A6%A8-%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%8F%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%B8-%E0%A6%B2%E0%A6%BF-%E0%A6%8F%E0%A6%A1%E0%A6%AE%E0%A6%BF%E0%A6%A8-%E0%A6%85%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%B8%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%9F-04-03-2023/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বিমান বাংলাদেশ এয়ারলাইন্স লি. — এডমিন অ্যাসিস্ট্যান্ট ">
Biman Admin Assistant
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BF%E0%A6%AE%E0%A6%BE%E0%A6%A8-%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%8F%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%B8-%E0%A6%B2%E0%A6%BF-%E0%A6%8F%E0%A6%A1%E0%A6%AE%E0%A6%BF%E0%A6%A8-%E0%A6%85%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%B8%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%9F-04-03-2023/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">4k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between flex-wrap overflow-x-auto scrollbar-hide">
<a href="https://sattacademy.com/mcq/is-used-to-create-a-web-page"
class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
3.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
______ is used to create a web page-
</div>
</a>
<div class="flex items-center gap-0.5 ms-auto">
</div>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 4 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 3 months ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 3 months ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4" >
<li id="option-77968-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-77968-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
HTTPS
</div>
</div>
</li>
<li id="option-77968-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-77968-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
WWW
</div>
</div>
</li>
<li id="option-77968-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-77968-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
URL
</div>
</div>
</li>
<li id="option-77968-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-77968-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
XML
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-77968">
<a href="https://sattacademy.com/question-bank/probashi-kallyan-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="প্রবাসী কল্যাণ ব্যাংক পিএলসি">
PKB
</a>
<a href="https://sattacademy.com/%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8%E0%A6%BE%E0%A6%B0-%E0%A6%9C%E0%A7%87%E0%A6%A8%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B2-12112021/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="প্রবাসী কল্যান ব্যাংক — অফিসার (জেনারেল) ">
PKB Officer
</a>
<a href="https://sattacademy.com/%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8%E0%A6%BE%E0%A6%B0-%E0%A6%9C%E0%A7%87%E0%A6%A8%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B2-12112021/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">2.1k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between flex-wrap overflow-x-auto scrollbar-hide">
<a href="https://sattacademy.com/mcq/which-one-does-run-on-client-side"
class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
4.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
Which one does run on client side ?
</div>
</a>
<div class="flex items-center gap-0.5 ms-auto">
</div>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 8 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 11 months ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 11 months ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4" >
<li id="option-44654-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-44654-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
PHP
</div>
</div>
</li>
<li id="option-44654-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-44654-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Java Script
</div>
</div>
</li>
<li id="option-44654-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-44654-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
ASP.NET
</div>
</div>
</li>
<li id="option-44654-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-44654-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
none of these
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-44654">
<a href="https://sattacademy.com/question-bank/janata-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="জনতা ব্যাংক পিএলসি">
JB PLC
</a>
<a href="https://sattacademy.com/janata-bank-ltd-senior-officer-it-29012016/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="জনতা ব্যাংক - সিনিয়র অফিসার (IT) ">
Janata Senior Officer
</a>
<a href="https://sattacademy.com/janata-bank-ltd-senior-officer-it-29012016/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">1.4k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between flex-wrap overflow-x-auto scrollbar-hide">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for"
class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
5.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
<p>What does HTML stand for?</p>
</div>
</a>
<div class="flex items-center gap-0.5 ms-auto">
<span
title="3 বার পরীক্ষায় এসেছে"
class="flex items-center gap-0.5 cursor-default shrink-0"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
fill="currentColor"
class="text-amber-400">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
<span class="text-[11px] font-medium text-amber-600 dark:text-amber-400 leading-none whitespace-nowrap fs-7">3 Exams</span>
</span>
</div>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 8 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 3 weeks ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 3 weeks ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4" >
<li id="option-33913-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hypo Thermal Mass Limiter</p>
</div>
</div>
</li>
<li id="option-33913-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-33913-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hyper Text Markup Language</p>
</div>
</div>
</li>
<li id="option-33913-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hypo Thermal Motor Liquid</p>
</div>
</div>
</li>
<li id="option-33913-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hyper Test Machine Linguistic</p>
</div>
</div>
</li>
<li id="option-33913-5" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-5" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঙ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>High Tenure Mobile License</p>
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-33913">
<a href="https://sattacademy.com/question-bank/standard-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ইসলামী ব্যাংক পিএলসি">
Standard Bank
</a>
<a href="https://sattacademy.com/standard-bank-ltd-officer-2006/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ব্যাংক - Officer">
Standard Officer
</a>
<a href="https://sattacademy.com/question-bank/southeast-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক পিএলসি">
Southeast Bank
</a>
<a href="https://sattacademy.com/southeast-bank-ltd-officer-2008/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক - Officer">
Southeast Officer - 2008
</a>
<a href="https://sattacademy.com/standard-bank-ltd-officer-2006/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ব্যাংক - Officer">
Standard Officer - 2006
</a>
<a href="https://sattacademy.com/question-bank/psc-and-others/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%A1%E0%A6%BC%E0%A6%95-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%83%E0%A6%AA%E0%A6%95%E0%A7%8D%E0%A6%B7-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BE%E0%A6%B2%E0%A6%95-%E0%A6%87%E0%A6%9E%E0%A7%8D%E0%A6%9C%E0%A6%BF%E0%A6%A8%E0%A6%BF%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%82-28-05-2024/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ সড়ক পরিবহন কর্তৃপক্ষ — সহকারী পরিচালক (ইঞ্জিনিয়ারিং)">
BRTA – Assistant Director (Engg.) - 2024
</a>
<a href="https://sattacademy.com/standard-bank-ltd-officer-2006/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">690</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between flex-wrap overflow-x-auto scrollbar-hide">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for-23022"
class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
6.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
What does HTML stand for?
</div>
</a>
<div class="flex items-center gap-0.5 ms-auto">
<span
title="3 বার পরীক্ষায় এসেছে"
class="flex items-center gap-0.5 cursor-default shrink-0"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
fill="currentColor"
class="text-amber-400">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
<span class="text-[11px] font-medium text-amber-600 dark:text-amber-400 leading-none whitespace-nowrap fs-7">3 Exams</span>
</span>
</div>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 8 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 3 weeks ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 3 weeks ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4" >
<li id="option-32572-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hypo Thermal Mass Limiter
</div>
</div>
</li>
<li id="option-32572-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-32572-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Markup Language
</div>
</div>
</li>
<li id="option-32572-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hypo Thermal Motor Liquid
</div>
</div>
</li>
<li id="option-32572-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Machine Linguistics
</div>
</div>
</li>
<li id="option-32572-5" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-5" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঙ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
High Tenure Mobile License
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-32572">
<a href="https://sattacademy.com/question-bank/southeast-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক পিএলসি">
Southeast Bank
</a>
<a href="https://sattacademy.com/southeast-bank-ltd-officer-2008/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক - Officer">
Southeast Officer
</a>
<a href="https://sattacademy.com/southeast-bank-ltd-officer-2008/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক - Officer">
Southeast Officer - 2008
</a>
<a href="https://sattacademy.com/question-bank/standard-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ইসলামী ব্যাংক পিএলসি">
Standard Bank
</a>
<a href="https://sattacademy.com/standard-bank-ltd-officer-2006/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ব্যাংক - Officer">
Standard Officer - 2006
</a>
<a href="https://sattacademy.com/question-bank/psc-and-others/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%A1%E0%A6%BC%E0%A6%95-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%83%E0%A6%AA%E0%A6%95%E0%A7%8D%E0%A6%B7-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BE%E0%A6%B2%E0%A6%95-%E0%A6%87%E0%A6%9E%E0%A7%8D%E0%A6%9C%E0%A6%BF%E0%A6%A8%E0%A6%BF%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%82-28-05-2024/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ সড়ক পরিবহন কর্তৃপক্ষ — সহকারী পরিচালক (ইঞ্জিনিয়ারিং)">
BRTA – Assistant Director (Engg.) - 2024
</a>
<a href="https://sattacademy.com/southeast-bank-ltd-officer-2008/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">766</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
<div class="my-4">
<style>
.t_wrap{
background:linear-gradient(135deg, #1a5c2e 0%, #2d8c4e 40%, #1a7a3a 70%, #0d4d20 100%);
border-radius:14px;
padding:24px 22px 20px;
font-family:'Hind Siliguri',Arial,sans-serif;
margin:0 auto;
overflow:hidden;
}
.t_badge{
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,0.15);
border:1px solid rgba(255,255,255,0.25);
border-radius:20px;padding:4px 12px;margin-bottom:12px;
}
.t_badge .dot{width:7px;height:7px;border-radius:50%;background:#4caf50;}
.t_badge span{color:#fff;font-size:11px;font-weight:500;}
.title{color:#fff;font-size:clamp(15px,4vw,20px);font-weight:600;;margin-bottom:5px;}
.title span{color:#ffd54f;}
.sub{color:rgba(255,255,255,0.82);font-size:clamp(11px,2.8vw,13px);margin-bottom:16px;line-height:1.5;}
.sub b{color:#80d8ff;}
.marquee-wrap{
display:flex;flex-direction:column;gap:8px;
margin-bottom:16px;
overflow:hidden;
-webkit-mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.marquee-row{display:flex;gap:8px;width:max-content;}
.marquee-row.r1{animation:scroll-left 28s linear infinite;}
.marquee-row.r2{animation:scroll-left 22s linear infinite;}
@keyframes scroll-left{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}
.feat{
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.18);
border-radius:9px;
padding:7px 12px;
display:flex;align-items:center;gap:7px;
flex-shrink:0;
white-space:nowrap;
}
.fi{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fi svg{width:11px;height:11px;}
.ft{color:#fff;font-size:clamp(10px,2.3vw,12px);line-height:1.35;}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.btn-y{background:#ffd54f;color:#1a237e;border:none;border-radius:20px;padding:9px 22px;font-size:clamp(12px,2.8vw,13px);font-weight:700;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;}
.btn-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.45);border-radius:20px;padding:8px 18px;font-size:clamp(12px,2.8vw,13px);font-weight:500;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;}
.stats{display:flex;gap:16px;margin-left:auto;}
.stat .n{color:#ffd54f;font-size:13px;font-weight:700;}
.stat .l{color:rgba(255,255,255,0.7);font-size:10px;}
@media(max-width:380px){.stats{margin-left:0;width:100%;justify-content:space-around;}}
</style>
<div class="t_wrap">
<div class="t_badge"><div class="dot"></div><span>শিক্ষকদের জন্য বিশেষভাবে তৈরি</span></div>
<p class="title">১ ক্লিকে <span>প্রশ্ন, শীট, সাজেশন</span> ও<br>অনলাইন পরীক্ষা তৈরির সফটওয়্যার!</p>
<p class="sub">শুধু প্রশ্ন সিলেক্ট করুন — <b>প্রশ্নপত্র অটোমেটিক তৈরি!</b></p>
<div class="marquee-wrap">
<!-- Row 1 (6 items × 2 for seamless loop) -->
<div class="marquee-row r1">
<!-- set 1 -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div>
<div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div>
<!-- set 2 (duplicate) -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div>
<div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div>
</div>
<!-- Row 2 (6 items × 2 for seamless loop, slightly different speed) -->
<div class="marquee-row r2">
<!-- set 1 -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div>
<!-- set 2 (duplicate) -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div>
</div>
</div>
<div class="cta">
<a href="https://sattacademy.com/e-question-builder" class="btn-y">এখনই শুরু করুন</a>
<a href="https://sattacademy.com/e-question-builder#question-list-section" class="btn-w">ডেমো দেখুন</a>
<div class="stats d-none d-md-flex">
<div class="stat"><div class="n">৫০,০০০+</div><div class="l">শিক্ষক</div></div>
<div class="stat"><div class="n">৩০ লক্ষ+</div><div class="l">প্রশ্নপত্র</div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="md:col-span-1">
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-800 p-4 shadow-xs text-zinc-800 dark:text-zinc-200">
<div class="mb-10">
<!-- Title -->
<div class="mb-3">
<h3 class="text-gray-900 dark:text-gray-100 font-bold text-sm uppercase tracking-wide">
Related Question
</h3>
</div>
<!-- Divider -->
<div class="mb-4 h-px bg-gray-200 dark:bg-zinc-700"></div>
<!-- List -->
<div class="space-y-2 overflow-x-auto">
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/html%E0%A6%8F%E0%A6%B0-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%95%E0%A7%80"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>HTML-এর পূর্ণরূপ কী?</p>
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/%E0%A6%AC%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%89%E0%A6%9C%E0%A6%BE%E0%A6%B0-%E0%A6%AF%E0%A6%A6%E0%A6%BF-%E0%A6%95%E0%A7%8B%E0%A6%A8%E0%A7%8B-%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A6%A3%E0%A7%87-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C-%E0%A6%B2%E0%A7%8B%E0%A6%A1-%E0%A6%95%E0%A6%B0%E0%A6%A4%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%B0%E0%A7%8D%E0%A6%A5-%E0%A6%B9%E0%A6%AF%E0%A6%BC-%E0%A6%A4%E0%A6%96%E0%A6%A8-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C%E0%A7%87%E0%A6%B0-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%87-%E0%A6%95%E0%A7%8B%E0%A6%A8-%E0%A6%9F%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%9F-"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>ব্রাউজার যদি কোনো কারণে ইমেজ লোড করতে ব্যর্থ হয় তখন ইমেজের পরিবর্তে কোন টেক্সট প্রদর্শনের জন্য ব্যবহৃত এট্রিবিউট কোনটি?</p>
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/is-used-to-create-a-web-page"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
______ is used to create a web page-
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/which-one-does-run-on-client-side"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
Which one does run on client side ?
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>What does HTML stand for?</p>
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for-23022"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
What does HTML stand for?
</a>
</div>
</div>
</div>
<a href="https://sattacademy.com/e-question-builder"
class="block p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-dashed border-blue-200 dark:border-blue-800 hover:shadow-md transition-all duration-200 mb-4">
<div class="text-blue-800 dark:text-blue-200">
<span class="font-semibold text-lg">মাত্র ১৫ পয়সায় প্রশ্নপত্র</span>
<div class="text-blue-600 dark:text-blue-400 font-medium mt-1">
১ ক্লিকে প্রশ্ন, শীট, সাজেশন তৈরি করুন আজই
</div>
</div>
</a>
<style>
.ep {
background: linear-gradient(135deg, #1565c0 0%, #1e88e5 55%, #29b6f6 100%);
border-radius: 12px;
padding: clamp(16px, 4vw, 24px) clamp(14px, 4vw, 24px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
gap: 12px;
}
.ep-title {
color: #fff;
font-size: clamp(16px, 4.5vw, 22px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.3px;
}
.ep-sub {
color: rgba(255, 255, 255, 0.8);
font-size: clamp(11px, 2.8vw, 13px);
margin-top: -4px;
}
.ep-cta {
background: #43a047;
color: #fff;
border: none;
border-radius: 30px;
padding: 10px 28px;
font-size: clamp(12px, 3vw, 14px);
font-weight: 700;
cursor: pointer;
letter-spacing: 0.2px;
}
.ep-stats {
display: flex;
align-items: center;
gap: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 30px;
padding: 6px 14px;
}
.ep-stat {
display: flex;
align-items: center;
gap: 5px;
}
.ep-stat svg {
flex-shrink: 0;
}
.ep-stat span {
font-size: clamp(10px, 2.5vw, 12px);
color: #fff;
}
.ep-divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.25);
}
</style>
<div class="ep">
<p class="ep-title">Complete Exam<br>Preparation</p>
<p class="ep-sub">Learn, practice, analyse and improve</p>
<div style="display: flex; gap: 12px;">
<a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play">
<img src="/satt_logo/appstore.svg" alt="App Store" style="width: 120px; height: auto; cursor: pointer;">
</a>
<a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play">
<img src="/satt_logo/playstore.svg" alt="Play Store" style="width: 120px; height: auto; cursor: pointer;">
</a>
</div>
<div class="ep-stats">
<div class="ep-stat">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
<span>1M+ downloads</span>
</div>
<div class="ep-divider"></div>
<div class="ep-stat">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
<span>4.6 · 8k+ Reviews</span>
</div>
</div>
</div> </div>
</div>
</div>
</div>
<div
x-data="{
questionId: null,
isLoading: true,
open: false,
questionText: '',
duplicateCount: 0,
type: 'mcq',
tagsHtml: '',
ratingTiers: [
{ min: 10, stars: 3 },
{ min: 8, stars: 2.5 },
{ min: 6, stars: 2 },
{ min: 4, stars: 1.5 },
{ min: 2, stars: 1 },
],
get rating() {
const tier = this.ratingTiers.find(t => this.duplicateCount >= t.min);
return tier ? tier.stars : 0;
},
get fullStars() {
return Math.floor(this.rating);
},
get hasHalfStar() {
return (this.rating % 1) === 0.5;
},
analytics: {
total_attempts: 0,
correct_count: 0,
incorrect_count: 0,
skip_count: 0,
},
openModal(event) {
this.open = true;
this.questionId = event.id;
this.type = event.type;
this.questionText = event.questionText || '';
this.duplicateCount = event.duplicateCount || 0;
// DOM থেকে tags HTML তুলে নাও
const tagContainer = document.querySelector(`.tags-${event.id}`);
this.tagsHtml = tagContainer ? tagContainer.innerHTML : '';
// analytics
if(this.type === 'mcq') {
this.fetchAnalytics();
}else {
this.isLoading = false;
}
// math render
this.$nextTick(() => {
if (window.MathJax) MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
});
},
closeModal() {
this.open = false;
},
async fetchAnalytics() {
if (!this.questionId) return;
this.isLoading = true;
try {
const response = await fetch(`/question-analytics/${this.questionId}`);
const data = await response.json();
this.analytics = data || this.analytics;
this.isLoading = false;
this.$nextTick(() => this.drawChart());
} catch (error) {
console.error('Failed to fetch analytics:', error);
this.isLoading = false;
}
},
pct(val) {
if (!this.analytics.total_attempts) return '0%';
return (val / this.analytics.total_attempts * 100).toFixed(1) + '%';
},
drawChart() {
const svg = this.$refs.pieChart;
while (svg.firstChild) svg.removeChild(svg.firstChild);
const segments = [
{ value: this.analytics.correct_count, color: '#10B981' },
{ value: this.analytics.incorrect_count, color: '#EF4444' },
{ value: this.analytics.skip_count, color: '#F59E0B' },
];
const total = this.analytics.total_attempts;
if (!total) return;
const cx = 100, cy = 100, r = 80, ir = 50;
const ns = 'http://www.w3.org/2000/svg';
const isDark = document.documentElement.classList.contains('dark');
const holeFill = isDark ? '#3f3f46' : '#ffffff';
const labelColor = isDark ? '#a1a1aa' : '#6B7280';
const totalColor = isDark ? '#f4f4f5' : '#111827';
const polar = (deg) => {
const rad = (deg - 90) * Math.PI / 180;
return { x: +(cx + r * Math.cos(rad)).toFixed(4), y: +(cy + r * Math.sin(rad)).toFixed(4) };
};
const addEl = (tag, attrs) => {
const el = document.createElementNS(ns, tag);
Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
svg.appendChild(el); return el;
};
const nonZero = segments.filter(s => s.value > 0);
if (nonZero.length === 1) {
addEl('circle', { cx, cy, r, fill: nonZero[0].color });
} else {
let start = 0;
segments.forEach(s => {
if (!s.value) return;
let sweep = (s.value / total) * 360;
if (sweep >= 360) sweep = 359.9999;
const end = start + sweep;
const sp = polar(start), ep = polar(end);
addEl('path', {
d: `M ${cx} ${cy} L ${sp.x} ${sp.y} A ${r} ${r} 0 ${sweep > 180 ? 1 : 0} 1 ${ep.x} ${ep.y} Z`,
fill: s.color, stroke: holeFill, 'stroke-width': 2
});
start = end;
});
}
addEl('circle', { cx, cy, r: ir, fill: holeFill });
[['মোট', cy - 8, 12, labelColor, 400], [total, cy + 14, 22, totalColor, 500]]
.forEach(([text, y, size, fill, weight]) => {
const t = document.createElementNS(ns, 'text');
Object.entries({ x: cx, y, 'text-anchor': 'middle', 'font-size': size, fill, 'font-weight': weight })
.forEach(([k, v]) => t.setAttribute(k, v));
t.textContent = text;
svg.appendChild(t);
});
},
}"
x-show="open"
x-transition.opacity
@open-analytics-modal.window="openModal($event.detail)"
@keydown.escape.window="closeModal()"
@click.self="closeModal()"
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-3 sm:p-5"
x-cloak
>
<div class="bg-white dark:bg-zinc-800 w-full max-w-lg rounded-2xl shadow-xl p-5 sm:p-6 relative">
<!-- Close -->
<button @click="closeModal()"
class="absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-full text-zinc-400 hover:text-red-500 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition text-sm">
✕
</button>
<!-- Title -->
<h4 class="text-center text-base sm:text-lg font-medium mb-5 text-zinc-900 dark:text-zinc-100">
Question Analytics
</h4>
<!-- Skeleton — matches exact layout of content below -->
<div x-show="isLoading" class="animate-pulse space-y-4">
<!-- Question card skeleton -->
<div class="bg-zinc-50 dark:bg-zinc-800/50 rounded-xl border border-zinc-200 dark:border-zinc-700 p-3">
<div class="h-5 bg-zinc-200 dark:bg-zinc-700 rounded w-3/4"></div>
<div class="flex items-center justify-between mt-3">
<div class="flex gap-1.5">
<div class="h-5 w-14 bg-zinc-200 dark:bg-zinc-700 rounded-full"></div>
<div class="h-5 w-16 bg-zinc-200 dark:bg-zinc-700 rounded-full"></div>
</div>
<div class="h-5 w-14 bg-zinc-200 dark:bg-zinc-700 rounded-md"></div>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-5 items-center">
<!-- Circle: must match svg w-36 h-36 sm:w-44 sm:h-44 exactly -->
<div class="w-36 h-36 sm:w-44 sm:h-44 rounded-full bg-zinc-200 dark:bg-zinc-700 shrink-0"></div>
<div class="w-full sm:flex-1 space-y-2">
<!-- Total card -->
<div class="h-14 bg-zinc-200 dark:bg-zinc-700 rounded-xl"></div>
<!-- 2-col grid -->
<div class="grid grid-cols-2 gap-2">
<div class="h-9 bg-zinc-200 dark:bg-zinc-700 rounded-lg"></div>
<div class="h-9 bg-zinc-200 dark:bg-zinc-700 rounded-lg"></div>
<div class="h-9 bg-zinc-200 dark:bg-zinc-700 rounded-lg col-span-2"></div>
</div>
</div>
</div>
</div>
<!-- Content -->
<div x-show="!isLoading" class="space-y-5">
<!-- Question info card -->
<div class="bg-zinc-50 dark:bg-zinc-800/60 rounded-xl p-3.5 border border-zinc-200 dark:border-zinc-700/50">
<div class="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed break-words" x-html="questionText"></div>
<div class="flex items-center justify-between gap-2 mt-3">
<div class="flex items-center gap-1.5 flex-nowrap overflow-x-auto whitespace-nowrap scrollbar-hide"
x-html="tagsHtml">
</div>
<div x-show="rating > 0"
class="flex items-center gap-0.5 cursor-default shrink-0 ms-auto"
:title="`${duplicateCount} বার পরীক্ষায় এসেছে`">
<template x-for="n in fullStars" :key="`full-${n}`">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
fill="currentColor" class="text-amber-400">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
</template>
<template x-if="hasHalfStar">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<defs>
<linearGradient :id="`half-star-${questionId}`">
<stop offset="50%" stop-color="currentColor" class="text-amber-400"/>
<stop offset="50%" stop-color="transparent" stop-opacity="0"/>
</linearGradient>
</defs>
<path :fill="`url(#half-star-${questionId})`" stroke="currentColor" stroke-width="1"
class="text-amber-400"
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
</template>
<span class="text-[11px] font-medium text-amber-600 dark:text-amber-400 leading-none whitespace-nowrap" x-text="`${duplicateCount}টি পরীক্ষায় এসেছে`"></span>
</div>
</div>
</div>
<!-- Chart + Stats -->
<div class="flex flex-col sm:flex-row items-center gap-5" x-show="type != 'written'">
<!-- Donut: w-36 h-36 on mobile, w-44 h-44 on sm+ -->
<svg x-ref="pieChart" viewBox="0 0 200 200"
class="w-36 h-36 sm:w-44 sm:h-44 shrink-0 mx-auto sm:mx-0">
</svg>
<!-- Stat cards -->
<div class="w-full sm:flex-1 space-y-2">
<div class="bg-zinc-50 dark:bg-zinc-700/60 rounded-xl px-4 py-3 border border-zinc-100 dark:border-zinc-700">
<p class="text-xs text-zinc-400 dark:text-zinc-500">মোট উত্তরদাতা</p>
<p class="text-xl sm:text-2xl font-medium text-zinc-900 dark:text-zinc-100 mt-0.5 leading-none">
<span x-text="analytics.total_attempts"></span>
<span class="text-xs sm:text-sm font-normal text-zinc-400 ml-1">জন</span>
</p>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-700/60 rounded-lg px-3 py-2.5 border border-zinc-100 dark:border-zinc-700">
<div class="w-2 h-2 rounded-full bg-emerald-500 shrink-0"></div>
<span class="flex-1 text-xs text-zinc-500 dark:text-zinc-400">সঠিক</span>
<span class="text-xs font-semibold text-emerald-500" x-text="analytics.correct_count"></span>
</div>
<div class="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-700/60 rounded-lg px-3 py-2.5 border border-zinc-100 dark:border-zinc-700">
<div class="w-2 h-2 rounded-full bg-red-500 shrink-0"></div>
<span class="flex-1 text-xs text-zinc-500 dark:text-zinc-400">ভুল</span>
<span class="text-xs font-semibold text-red-500" x-text="analytics.incorrect_count"></span>
</div>
<div class="col-span-2 flex items-center gap-2 bg-zinc-50 dark:bg-zinc-700/60 rounded-lg px-3 py-2.5 border border-zinc-100 dark:border-zinc-700">
<div class="w-2 h-2 rounded-full bg-amber-400 shrink-0"></div>
<span class="flex-1 text-xs text-zinc-500 dark:text-zinc-400">উত্তর নেই</span>
<span class="text-xs font-semibold text-amber-500" x-text="analytics.skip_count"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div id="footer-promotion-content" class="container mx-auto px-2"></div>
</main>
<style>
/* --- CSS Variables for Light/Dark Mode --- */
:root {
--bottom-ad-bg: #ffffff;
--bottom-ad-text: #212529;
--bottom-ad-border: #70707030;
--bottom-ad-btn-bg: #ffffff;
}
html.dark,
html.dark-mode {
--bottom-ad-bg: #1f2937;
--bottom-ad-text: #f3f4f6;
--bottom-ad-border: #374151;
--bottom-ad-btn-bg: #374151;
}
/* --- Base Offcanvas Container --- */
.bottom-offcanvas {
position: fixed;
left: 0;
background: var(--bottom-ad-bg);
color: var(--bottom-ad-text);
width: 100%;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 2000;
height: fit-content !important;
}
/* --- Top Orientation Styles --- */
.bottom-offcanvas.is-top {
top: 0;
border-bottom: 1px solid var(--bottom-ad-border);
transform: translateY(-100%);
}
.is-top .bottom-ads-close-btn {
bottom: -32px;
border-radius: 0 0 6px 6px;
border-top: 0;
}
/* --- Bottom Orientation Styles --- */
.bottom-offcanvas.is-bottom {
bottom: 0;
border-top: 1px solid var(--bottom-ad-border);
transform: translateY(100%);
}
.is-bottom .bottom-ads-close-btn {
top: -32px;
border-radius: 6px 6px 0 0;
border-bottom: 0;
}
/* --- State: Active (Slide In) --- */
.bottom-offcanvas.active {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
/* --- Toggle Buttons --- */
.bottom-ads-open-btn,
.bottom-ads-close-btn {
background-color: var(--bottom-ad-btn-bg);
color: var(--bottom-ad-text);
left: 0;
position: fixed;
padding: 4px 16px;
z-index: 9999;
border: 1px solid var(--bottom-ad-border);
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.bottom-ads-open-btn {
opacity: 0.5;
transition: opacity 0.3s ease;
display: none;
}
.bottom-ads-open-btn:hover {
opacity: 1;
}
/* Trigger Button Positions */
.pos-top-btn { top: 0; border-radius: 0 0 6px 6px; border-top: 0; }
.pos-bottom-btn { bottom: 0; border-radius: 6px 6px 0 0; border-bottom: 0; }
/* --- Subscription Button Animation --- */
.subscription-btn {
background: linear-gradient(45deg, var(--sa-bg-primary, #007bff), var(--sa-bg-secondary-300, #6610f2), #0be93b, var(--sa-bg-secondary-300, #6610f2), var(--sa-bg-primary, #007bff));
background-size: 400% 400%;
animation: gradient 15s ease infinite;
color: #fff !important;
border: 0px;
}
@keyframes gradient {
0% { background-position: 0 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
#bottom-fixed-ad-content { width: 100%; min-height: 50px; }
/* --- Replaced Bootstrap Classes (namespaced to avoid conflicts) --- */
.bottom-ad-hidden { display: none; }
.bottom-ad-relative { position: relative; }
.bottom-ad-absolute { position: absolute; }
.bottom-ad-shadow { box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.bottom-ad-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.bottom-ad-col-12 { width: 100%; padding: 0 15px; box-sizing: border-box; }
@media (min-width: 576px) {
.bottom-ad-col-sm-7 { width: 58.333333%; padding: 0 15px; box-sizing: border-box; }
.bottom-ad-col-sm-5 { width: 41.666667%; padding: 0 15px; box-sizing: border-box; }
}
.bottom-ad-mx-auto { margin-left: auto; margin-right: auto; }
.bottom-ad-pt-4 { padding-top: 1.5rem; }
.bottom-ad-pb-2 { padding-bottom: 0.5rem; }
.bottom-ad-px-3 { padding-left: 1rem; padding-right: 1rem; }
.bottom-ad-mb-2 { margin-bottom: 0.5rem; }
.bottom-ad-text-center { text-align: center; }
.bottom-ad-text-dark { color: var(--bottom-ad-text); }
.bottom-ad-text-white { color: #ffffff; }
.bottom-ad-fs-4 { font-size: 1.5rem; }
.bottom-ad-fs-5 { font-size: 1.25rem; }
.bottom-ad-w-100 { width: 100%; }
.bottom-ad-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.bottom-ad-border-0 { border: none; }
.bottom-ad-btn { display: inline-block; border: none; cursor: pointer; text-decoration: none; font-family: inherit; }
.bottom-ad-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.bottom-ad-align-center { align-items: center; }
</style>
<div class="bottom-ad-relative" id="footer-bottom-ads" style="display: none">
<button class="bottom-ad-btn-sm bottom-ad-shadow bottom-ad-hidden" id="ad-open-trigger" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bottom-ad-text-dark bottom-ad-fs-4"><path d="m6 15 6-6 6 6"/></svg>
</button>
<div class="bottom-offcanvas" id="bottom-offcanvas">
<button type="button" class="bottom-ads-close-btn bottom-ad-border-0 bottom-ad-absolute bottom-ad-shadow"
aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bottom-ad-text-dark bottom-ad-fs-4"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div style="max-width: 1200px;" class="bottom-ad-mx-auto bottom-ad-pt-4 bottom-ad-pb-2 bottom-ad-px-3">
<div class="bottom-ad-row bottom-ad-align-center">
<div class="bottom-ad-col-12 bottom-ad-mb-2">
<div id="bottom-fixed-ad-content">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
window.addEventListener('load', function() {
google.accounts.id.initialize({
client_id: "628877956961-qhkeatldt9371l65e3drolrv3a2t19uv.apps.googleusercontent.com",
callback: handleCredentialResponse,
auto_select: false,
cancel_on_tap_outside: false,
context: 'signin',
});
google.accounts.id.prompt();
});
async function handleCredentialResponse(response) {
try {
const res = await fetch('/google-login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
},
body: JSON.stringify({
credential: response.credential
}),
});
const data = await res.json();
if (data.success) {
window.location.href = '/';
} else {
toastr.error('Login failed. Please try again.');
}
} catch (err) {
console.error('Google login error:', err);
toastr.error('Something went wrong.');
}
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
if(isBot) {
return;
}
// Use fetch
fetch('/update-presence', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
},
}).catch(function(err) {
console.warn('Presence update failed:', err);
});
});
</script>
<script>
document.querySelectorAll('.pill').forEach(p => {
setTimeout(() => p.classList.add('show'), 50);
});
function showdopaminToast(msg) {
const t = document.getElementById('dopamin-toast');
if (!t) return; // Guard clause
t.textContent = msg;
t.classList.add('show');
clearTimeout(window._tt);
window._tt = setTimeout(() => t.classList.remove('show'), 2200);
}
function addRipple(btn) {
const r = document.createElement('span');
r.className = 'ripple';
btn.appendChild(r);
setTimeout(() => r.remove(), 500);
}
// Safely attach listeners using Optional Chaining or If checks
const mcqBtn = document.getElementById('mcqBtn');
if (mcqBtn) {
mcqBtn.addEventListener('click', function () {
addRipple(this);
showdopaminToast('215 টি MCQ লোড হচ্ছে...');
});
}
const cqBtn = document.getElementById('cqBtn');
if (cqBtn) {
cqBtn.addEventListener('click', function () {
addRipple(this);
showdopaminToast('156টি CQ লোড হচ্ছে...');
});
}
const pracBtn = document.getElementById('pracBtn');
if (pracBtn) {
pracBtn.addEventListener('click', function () {
showdopaminToast('Practice শুরু হচ্ছে!');
});
}
</script>
<script>
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
var footerBottomAds = document.getElementById('footer-bottom-ads');
var offcanvas = document.getElementById('bottom-offcanvas');
var openBtn = document.getElementById('ad-open-trigger');
var closeBtn = document.querySelector('.bottom-ads-close-btn');
var iconOpen = openBtn ? openBtn.querySelector('svg') : null;
var iconClose = closeBtn ? closeBtn.querySelector('svg') : null;
if (!footerBottomAds || !offcanvas || !openBtn || !closeBtn || !iconOpen || !iconClose) {
return;
}
// 1. Randomly decide Top (true) or Bottom (false)
// var isTop = Math.random() < 0.5;
var isTop = false;
var chevronUpPath = 'm6 15 6-6 6 6';
var chevronDownPath = 'm6 9 6 6 6-6';
if (isTop) {
// Apply Top logic
offcanvas.classList.add('is-top');
openBtn.classList.add('pos-top-btn');
// Switch icons so they point the correct way
iconOpen.querySelector('path').setAttribute('d', chevronDownPath);
iconClose.querySelector('path').setAttribute('d', chevronUpPath);
} else {
// Apply Bottom logic
offcanvas.classList.add('is-bottom');
openBtn.classList.add('pos-bottom-btn');
}
// 2. Initial Display
setTimeout(function() {
footerBottomAds.style.display = 'block';
offcanvas.classList.add('active');
}, 5000);
// 3. Load Ad Content
fetch("https://sattacademy.com/bottom-ad-content")
.then(function(response) {
return response.json();
})
.then(function(data) {
var contentDiv = document.getElementById('bottom-fixed-ad-content');
if (data.show_bottom_fixed_ad && contentDiv) {
contentDiv.innerHTML = data.bottom_fixed_ad_content;
}
})
.catch(function(error) {
console.error('Error loading bottom ad content:', error);
});
// 4. Toggle Interaction Logic
closeBtn.addEventListener('click', function() {
openBtn.classList.remove('bottom-ad-hidden');
offcanvas.classList.remove('active');
});
openBtn.addEventListener('click', function() {
this.classList.add('bottom-ad-hidden');
offcanvas.classList.add('active');
});
});
})();
</script>
<!-- Global Functions -->
<script>
function toggleMobileSidebar() {
var s = document.getElementById('mobile-sidebar');
if (s) s.classList.toggle('open');
}
function toggleTheme() {
var html = document.documentElement;
var isDark = html.classList.contains('dark');
var next = isDark ? 'light' : 'dark';
html.classList.toggle('dark', next === 'dark');
html.classList.toggle('light', next === 'light');
localStorage.setItem('theme', next);
}
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('click', function (e) {
var s = document.getElementById('mobile-sidebar');
var btn = document.querySelector('[onclick="toggleMobileSidebar()"]');
if (s && s.classList.contains('open')) {
if (!s.contains(e.target) && (!btn || !btn.contains(e.target))) {
s.classList.remove('open');
}
}
});
});
</script>
<!-- Mobile Sidebar -->
<style>
/* Sidebar */
#mobile-sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: min(20rem, 75%);
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(1rem);
-webkit-backdrop-filter: blur(1rem);
border-right: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
z-index: 5000;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
/* Logo Section */
.logo-section {
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
padding: 0 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.logo-link {
text-decoration: none;
}
.logo-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo-img {
height: 2.5rem;
}
.logo-white {
display: none;
}
.icon-button {
padding: 0.5rem;
color: #6b7280;
background: transparent;
border: none;
border-radius: 9999px;
cursor: pointer;
transition: all 0.3s;
}
.icon-button:hover {
color: #374151;
background-color: #f3f4f6;
}
.icon-button svg {
width: 1.5rem;
height: 1.5rem;
}
.collapse-button {
display: none;
}
/* Navigation */
#mobile-sidebar {
.nav-section {
flex: 1;
overflow-y: auto;
padding: 1rem;
}
.nav-section::-webkit-scrollbar {
display: none;
}
.nav-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0;
padding: 0;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.6rem;
border-radius: 12px;
text-decoration: none;
color: #4b5563;
transition: all 0.3s;
font-weight: 500;
letter-spacing: 0.025em;
}
.nav-link:hover {
background-color: rgba(243, 244, 246, 0.6);
}
.nav-link.active {
background-color: rgba(229, 231, 235, 0.5);
color: #111827;
}
.nav-icon {
margin-right: 12px;
font-size: 1.1rem;
transition: transform 0.3s;
}
.nav-link:hover .nav-icon {
transform: scale(1.1);
}
.nav-icon svg {
width: 1.5rem;
height: 1.5rem;
}
}
/* Features Section */
.features-section {
margin-top: 32px;
}
.features-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.5rem;
}
.features-title {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.025em;
color: #6b7280;
font-weight: 600;
opacity: 0.7;
}
.customize-button {
opacity: 1;
color: #9ca3af;
background: transparent;
border: none;
padding: 4px;
border-radius: 4px;
cursor: pointer;
transition: color 0.3s;
}
.customize-button:hover {
color: #374151;
}
.customize-button svg {
width: 20px;
height: 20px;
}
/* User Profile */
.user-section {
padding: 0.5rem;
border-top: 1px solid #e5e7eb;
overflow: hidden;
}
.user-card {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
cursor: pointer;
padding: 0.5rem;
border-radius: 0.5rem;
transition: background-color 0.3s;
}
.user-card:hover {
background-color: #f3f4f6;
}
.avatar-container {
position: relative;
}
.avatar-img {
width: 32px;
height: 32px;
border-radius: 9999px;
object-fit: cover;
border: 2px solid #ffffff;
transition: all 0.3s;
}
.status-indicator {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
background-color: #10b981;
border: 2px solid #ffffff;
border-radius: 9999px;
}
.user-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.user-name {
font-size: 1.1rem;
margin: 0;
font-weight: 600;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-details {
font-size: 0.8rem;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-plan {
font-size: 0.75rem;
}
.edit-button {
padding: 0.5rem;
background-color: #e5e7eb;
border: none;
border-radius: 0.5rem;
color: #9ca3af;
cursor: pointer;
transition: all 0.3s;
}
.edit-button:hover {
color: #4b5563;
box-shadow: 0 0 0 1px #d1d5db;
}
.edit-button svg {
width: 20px;
height: 20px;
}
/* Main Content Area */
/* .main-content {
margin-left: 20rem;
padding: 32px;
min-height: 100vh;
} */
/* Mobile styles */
@media (max-width: 1024px) {
#mobile-sidebar.open {
transform: translateX(0);
}
/* .main-content {
margin-left: 0;
} */
.collapse-button {
display: block;
}
}
@media (min-width: 1024px) {
.logo-section:hover .collapse-button {
display: block;
}
}
[data-theme="light"],
html.light {
.logo-white {
display: none;
}
#sun {
display: none;
}
}
/* Dark mode support */
[data-theme="dark"],
html.dark {
#mobile-sidebar {
background-color: rgba(31, 41, 55, 0.6);
border-right-color: #374151;
.nav-link {
color: #9ca3af;
}
.nav-link:hover {
background-color: rgba(31, 41, 55, 0.6);
}
.nav-link.active {
background-color: rgba(55, 65, 81, 0.5);
color: #f3f4f6;
}
}
.logo-section {
border-bottom-color: #374151;
}
.logo-black {
display: none;
}
.logo-white {
display: block;
}
#moon {
display: none;
}
.icon-button {
color: #9ca3af;
}
.icon-button:hover {
color: #d1d5db;
background-color: rgba(55, 65, 81, 0.5);
}
.user-section {
border-top-color: #374151;
}
.user-card:hover {
background-color: #374151;
}
.avatar-img {
border-color: #374151;
}
.status-indicator {
border-color: #111827;
}
.user-name {
color: #f3f4f6;
}
.user-details {
color: #9ca3af;
}
.edit-button {
background-color: #374151;
color: #d1d5db;
}
.edit-button:hover {
color: #f3f4f6;
box-shadow: 0 0 0 1px #4b5563;
}
/* .main-content {
color: #f3f4f6;
} */
}
</style>
<aside id="mobile-sidebar">
<!-- Logo Section -->
<div class="logo-section">
<a href="/user/dashboard" class="logo-link">
<div class="logo-container">
<img class="logo-img logo-black" src="https://sattacademy.com/custom/logo_black.png" alt="Logo">
<img class="logo-img logo-white" src="https://sattacademy.com/custom/logo_white.png" alt="Logo">
</div>
</a>
<div style="position: relative; transform: translateX(0.5rem); display: flex;">
<button class="icon-button" onClick="toggleTheme()" aria-label="Toggle theme">
<svg id="sun" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
</path>
</svg>
<svg id="moon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
</path>
</svg>
</button>
<button class="icon-button" onClick="toggleMobileSidebar()" aria-label="Close sidebar">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</button>
</div>
</div>
<!-- Navigation Menu -->
<nav class="nav-section">
<ul class="nav-list">
<li>
<a href="/academy" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9zm6.82 6L12 12.72L5.18 9L12 5.28zM17 16l-5 2.72L7 16v-3.73L12 15l5-2.73z" />
</svg>
</span>
<span>Academy</span>
</a>
</li>
<li>
<a href="/admission-assistant" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M19 3h-4.18C14.25 1.44 12.53.64 11 1.2c-.86.3-1.5.96-1.82 1.8H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-7 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1M7 7h10V5h2v14H5V5h2zm10 4H7V9h10zm-2 4H7v-2h8z" />
</svg>
</span>
<span>Admission</span>
</a>
</li>
<li>
<a href="/job-assistant" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M20 6c.58 0 1.05.2 1.42.59c.38.41.58.86.58 1.41v11c0 .55-.2 1-.58 1.41c-.37.39-.84.59-1.42.59H4c-.58 0-1.05-.2-1.42-.59C2.2 20 2 19.55 2 19V8c0-.55.2-1 .58-1.41C2.95 6.2 3.42 6 4 6h4V4c0-.58.2-1.05.58-1.42C8.95 2.2 9.42 2 10 2h4c.58 0 1.05.2 1.42.58c.38.37.58.84.58 1.42v2zM4 8v11h16V8zm10-2V4h-4v2z" />
</svg>
</span>
<span>Job Assistant</span>
</a>
</li>
<li>
<a href="/skill" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z" />
</svg>
</span>
<span>Skill</span>
</a>
</li>
<li>
<a href="/courses" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9zm6.82 6L12 12.72L5.18 9L12 5.28zM17 16l-5 2.72L7 16v-3.73L12 15l5-2.73z" />
</svg>
</span>
<span>Course</span>
</a>
</li>
<li>
<a href="/books" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M18 2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2h-5v8l-2.5-2.25L8 12V4H6v16h12z" />
</svg>
</span>
<span>Book</span>
</a>
</li>
<li>
<a href="/modeltest-list" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"
class="iconify iconify--mdi size-6">
<path fill="currentColor"
d="M19 3h-4.18C14.25 1.44 12.53.64 11 1.2c-.86.3-1.5.96-1.82 1.8H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-7 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1M7 7h10V5h2v14H5V5h2zm10 4H7V9h10zm-2 4H7v-2h8z">
</path>
</svg>
</span>
<span>Exams</span>
</a>
</li>
<li>
<a href="/packages" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M16 9h3l-5 7m-4-7h4l-2 8M5 9h3l2 7m5-12h2l2 3h-3m-5-3h2l1 3h-4M7 4h2L8 7H5m1-5L2 8l10 14L22 8l-4-6z" />
</svg>
</span>
<span>Pricing</span>
</a>
</li>
<li>
<a href="/gk" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M20 5v14H4V5zm0-2H4c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2m-2 12H6v2h12zm-8-8H6v6h4zm2 2h6V7h-6zm6 2h-6v2h6z" />
</svg>
</span>
<span>GK & Current Affairs</span>
</a>
</li>
<li>
<a href="/qa" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M15 4v7H5.17L4 12.17V4zm1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1" />
</svg>
</span>
<span>Forum</span>
</a>
</li>
<li>
<a href="/e-question-builder" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor"
d="M7.238 17.013a1 1 0 0 1 1.497 1.32l-.083.094l-2.298 2.298a1.25 1.25 0 0 1-1.666.09l-.102-.09l-1.237-1.238a1 1 0 0 1 1.32-1.497l.094.083l.707.707l1.768-1.768ZM20 18a1 1 0 0 1 0 2h-9a1 1 0 1 1 0-2zM8.652 10.012a1 1 0 0 1 0 1.415l-2.298 2.298a1.25 1.25 0 0 1-1.768 0l-1.237-1.238a1 1 0 1 1 1.414-1.414l.707.707l1.768-1.767a1 1 0 0 1 1.414 0ZM20 11a1 1 0 0 1 .117 1.993L20 13h-9a1 1 0 0 1-.116-1.993L11 11zM7.238 3.013a1 1 0 0 1 1.497 1.32l-.083.094l-2.298 2.298a1.25 1.25 0 0 1-1.666.09l-.102-.09l-1.237-1.238a1 1 0 0 1 1.32-1.497l.094.083l.707.707zM20 4a1 1 0 0 1 .117 1.993L20 6h-9a1 1 0 0 1-.116-1.993L11 4z" />
</g>
</svg>
</span>
<span>এক ক্লিকে প্রশ্ন তৈরি</span>
</a>
</li>
<li>
<a href="/business-account" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M21.71 8.71c1.25-1.25.68-2.71 0-3.42l-3-3c-1.26-1.25-2.71-.68-3.42 0L13.59 4H11C9.1 4 8 5 7.44 6.15L3 10.59v4l-.71.7c-1.25 1.26-.68 2.71 0 3.42l3 3c.54.54 1.12.74 1.67.74c.71 0 1.36-.35 1.75-.74l2.7-2.71H15c1.7 0 2.56-1.06 2.87-2.1c1.13-.3 1.75-1.16 2-2C21.42 14.5 22 13.03 22 12V9h-.59zM20 12c0 .45-.19 1-1 1h-1v1c0 .45-.19 1-1 1h-1v1c0 .45-.19 1-1 1h-4.41l-3.28 3.28c-.31.29-.49.12-.6.01l-2.99-2.98c-.29-.31-.12-.49-.01-.6L5 15.41v-4l2-2V11c0 1.21.8 3 3 3s3-1.79 3-3h7zm.29-4.71L18.59 9H11v2c0 .45-.19 1-1 1s-1-.55-1-1V8c0-.46.17-2 2-2h3.41l2.28-2.28c.31-.29.49-.12.6-.01l2.99 2.98c.29.31.12.49.01.6" />
</svg>
</span>
<span>Business Account</span>
</a>
</li>
<li>
<a href="/blogs" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9zm4 16H5V5h9v5h5m-2 4H7v-2h10m-3 5H7v-2h7" />
</svg>
</span>
<span>Blog</span>
</a>
</li>
<li>
<a href="/handnotes" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M17 4v6l-2-2l-2 2V4H9v16h10V4zM3 7V5h2V4a2 2 0 0 1 2-2h12c1.05 0 2 .95 2 2v16c0 1.05-.95 2-2 2H7c-1.05 0-2-.95-2-2v-1H3v-2h2v-4H3v-2h2V7zm2-2v2h2V5zm0 14h2v-2H5zm0-6h2v-2H5z" />
</svg>
</span>
<span>Hand Note</span>
</a>
</li>
<li>
<a href="/pdf-questions" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 2v14H5V5h14m-1.1 8.5c-.3-.5-1-.7-2.2-.7c-.4 0-.8 0-1.2.1c-.3-.2-.6-.4-.8-.6c-.6-.5-1.2-1.4-1.5-2.5v-.1c.3-1.3.6-2.8 0-3.5c-.3-.1-.5-.2-.7-.2h-.2c-.4 0-.7.4-.8.7c-.4 1.3-.1 2 .2 3.2c-.2.9-.6 1.8-1 2.8c-.4.7-.7 1.3-1 1.8c-.4.2-.7.3-.9.5c-1.1.7-1.7 1.5-1.8 2v.5l.5.3c.2.2.3.2.5.2c.8 0 1.7-.9 2.9-3h.1c1-.3 2.2-.5 3.9-.7c1 .5 2.2.7 2.9.7c.4 0 .7-.1.9-.3c.2-.2.3-.4.3-.6c0-.3 0-.5-.1-.6" />
</svg>
</span>
<span>PDF Questions</span>
</a>
</li>
<li>
<a href="/notices" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M10 21h4c0 1.1-.9 2-2 2s-2-.9-2-2m11-2v1H3v-1l2-2v-6c0-3.1 2-5.8 5-6.7V4c0-1.1.9-2 2-2s2 .9 2 2v.3c3 .9 5 3.6 5 6.7v6zm-4-8c0-2.8-2.2-5-5-5s-5 2.2-5 5v7h10z" />
</svg>
</span>
<span>Notices</span>
</a>
</li>
<li>
<a href="/career" class="nav-link">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M20 6c.58 0 1.05.2 1.42.59c.38.41.58.86.58 1.41v11c0 .55-.2 1-.58 1.41c-.37.39-.84.59-1.42.59H4c-.58 0-1.05-.2-1.42-.59C2.2 20 2 19.55 2 19V8c0-.55.2-1 .58-1.41C2.95 6.2 3.42 6 4 6h4V4c0-.58.2-1.05.58-1.42C8.95 2.2 9.42 2 10 2h4c.58 0 1.05.2 1.42.58c.38.37.58.84.58 1.42v2zM4 8v11h16V8zm10-2V4h-4v2z" />
</svg>
</span>
<span>Career</span>
</a>
</li>
</ul>
</nav>
<!-- User Profile Section -->
<div class="user-section">
<div class="user-card">
<a class="user-info" href="https://sattacademy.com/login" style="text-align:center; width:100%;">
<p class="user-name">Login / Register</p>
<span class="user-details">Click to access your account</span>
</a>
</div>
</div>
</aside>
<script src="https://sattacademy.com/js/inspect.js" defer></script>
<script type="text/javascript">
// Apply Copy limit
document.addEventListener('DOMContentLoaded', () => {
const dailyCopyLimit = 50; // Daily copy limit
const copyCountKey = 'dcc'; // Daily copy count key
const lastResetKey = 'dcc_lrt'; // Last reset time key
// Helper function to reset the copy count daily
const resetCopyCountIfNeeded = () => {
const now = new Date();
const today = now.toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
const lastReset = localStorage.getItem(lastResetKey);
if (lastReset !== today) {
localStorage.setItem(copyCountKey, 0); // Reset count
localStorage.setItem(lastResetKey, today); // Update reset time
}
};
resetCopyCountIfNeeded();
// Copy event listener
document.addEventListener('copy', (e) => {
e.preventDefault();
const selection = document.getSelection();
if (selection.toString().length === 0) {
return;
}
let currentCount = parseInt(localStorage.getItem(copyCountKey)) || 0;
if (currentCount >= dailyCopyLimit) {
Swal.fire({
icon: 'error',
title: 'Copy Limit Exceeded',
text: `You have reached the daily copy limit of ${dailyCopyLimit}. Please come back tomorrow!`,
});
return;
}
// Append additional text to copied content
const additionalText =
"\n\nCopied from SATT ACADEMY. Visit us at: https://sattacademy.com";
const modifiedText = selection + additionalText;
e.clipboardData.setData('text/plain', modifiedText);
// Increment copy count
currentCount++;
localStorage.setItem(copyCountKey, currentCount);
if (currentCount % 10 === 0) {
alert(
`You have used ${currentCount} out of ${dailyCopyLimit} copies available today.`
);
}
});
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: {
mtextFontInherit: true // এটি বাংলা টেক্সট ভেঙে যাওয়া রোধ করবে
},
"HTML-CSS": {
mtextFontInherit: true
},
SVG: {
mtextFontInherit: true
}
});
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/javascript">
function card(content, options = {
withLink: true,
countClick: true
}) {
let card = '';
card +=
`<div class="card-rounded promotion-card" onclick="handlePromotionCardClick('${content.target_url}', ${options?.withLink}, ${content.id}, ${options?.countClick})">`;
if (content.content_header) {
if(content.content_header.startsWith('<')) {
card += `<div>
${content.content_header}
</div>`;
} else {
card += `<div class="text-dark text-center p-3" style="border-bottom: 1px solid #999;">
${content.content_header}
</div>`;
}
}
if (content.type == 'custom') {
card += `<div class="">
${content.content}
</div>`;
} else if (content.type == 'image') {
let imgUrl = content.image.startsWith('http') ? content.image : '/storage/' + content.image;
card += `<img src="${imgUrl}" style="max-width: 100%; height: auto;" />`;
} else if (content.type == 'video') {
if (content.video.includes('youtube.com/') || content.video.includes('youtu.be/') || content.video.includes('vimeo.com/') || content.video
.includes('facebook.com/')) {
card +=
`<iframe src="${convertToEmbedUrl(content.video)}" style="width: 100%; aspect-ratio: 16/9;" scrolling="no" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
} else {
card +=
`<video src="${content.video}" class="rounded my-auto promoted-video" style="width: 100%;" controls autoplay loop muted playsinline />`;
}
} else if (content.type == 'book') {
let bookPrice = content.book.price;
let bookDiscountPrice = content.book.discount_price;
let isFree = bookDiscountPrice == 0 || bookDiscountPrice == '0';
card += `
<div class="row g-0 h-100">
<div class="col-4">
<img src="${content.book.cover_image}" class="img-fluid rounded-start"
style="height: 100%; object-fit: cover; max-height: 200px;" alt="...">
</div>
<div class="col-8">
<div class="">
<span class="fs-9 text-muted">BOOK</span>
<h5 class="card-title">
${content.book.name}
</h5>
<div class="my-1">
${content.book.author_name ? '<span class="fs-7 text-gray-700">Author: ' + content.book.author_name +
'</span>' : ''}
<div class="fs-7 text-gray-700"> by ${content.book.business?.name || 'Satt Academy'}</div>
</div>
<div class="d-flex mt-1 align-items-center justify-content-between">
<span class="">
${!isFree && bookPrice != bookDiscountPrice ? '<span class="text-muted text-decoration-line-through fs-6">৳' + bookPrice + '</span>' : ''}
${isFree ? '<span class="badge badge-success">Free</span>' : ('<span class="fw-bold text-danger fs-6">৳' + bookDiscountPrice + '</span>')}
</span>
<span>
<i
class="fs-5 fas fa-${content.book.book_type == 'soft_copy' ? 'file-pdf text-danger' : 'book text-info'}"></i>
</span>
</div>
</div>
</div>
</div>
`;
} else if (content.type == 'course') {
//console.log(content);
card += `
<div class="row g-0 h-100">
<div class="col-4">
<img src="${content.course.cover_photo}" class="img-fluid rounded-start"
style="height: 100%; object-fit: cover;" alt="...">
</div>
<div class="col-8">
<div class="">
<span class="fs-9 text-muted">COURSE</span>
<h5 class="card-title">
${content.course.name}
</h5>
<div class="my-1">
${content.course.author_name ? '<span class="fs-7 text-gray-700">' + content.course.author_name
+ '</span>' : ''}
<span class="fs-7 text-gray-700"> by ${content.course.business?.name || 'Satt Academy'}</span><br>
</div>
<div class="d-flex align-items-center justify-content-between">
<span class="">
${content.course.price == 0 || content.course.price == '0' || content.course.price == null ?
'<span class="badge badge-success">Free</span>' : '<span class="fw-bold text-danger fs-6">৳' + content.course.price + '</span>'}
</span>
<span class="rounded text-white p-1 fs-9"
style="background-color: #D82D2F">${content.course.course_level.toUpperCase()}</span>
</div>
</div>
</div>
</div>
`;
} else if (content.type == 'exam') {
card += `
<div class="row g-0 h-100">
<div class="col-12">
<div class="">
<span class="fs-8 pb-3">MODEL TEST || SATT ACADEMY</span>
<h5 class="text-primary text-capitalize fs-3 fw-bold mb-1">
${content.exam.name}
</h5>
<p class="m-0">by ${ content.exam.business?.name ?? 'Satt Academy' }</p>
<div class="d-flex mt-2 gap-2 justify-content-between align-items-end">
<div class="d-flex flex-wrap align-items-center gap-2">
<span class="badge badge-secondary">${content.exam.duration} min</span>
<span class="badge badge-secondary">${content.exam.number_of_question} questions</span>
<span class="badge badge-secondary">${content.exam.total_mark} marks</span>
</div>
<div class="btn btn-primary sa-btn-primary py-2 px-3 fs-7">Attend now!</div>
</div>
</div>
</div>
</div>
`;
} else if (content.type == 'exam_package') {
// console.log(content);
card += `
<div class="row g-0 h-100">
<div class="col-12">
<div class="">
<span class="fs-8 pb-3">EXAM PACKAGE</span>
<h5 class="text-primary text-capitalize fs-3 fw-bold mb-1">
${content.exam_package.name}
</h5>
<p class="m-0">by ${ content.exam_package.business?.name ?? 'Satt Academy' }</p>
<div class="d-flex mt-2 gap-2 justify-content-between align-items-end">
<div class="d-flex align-items-center gap-2">
<span class="badge badge-secondary">${content.exam_package.exams_count} exams</span>
</div>
</div>
</div>
</div>
</div>
`;
} else if (content.type == 'business') {
card += `
<div class="row g-0 h-100">
<div class="col-12">
<div class="">
<div class="row">
<div class="col-2">
<img src="${content.business?.logo}" width="100" height="100" class="img-fluid rounded">
</div>
<div class="col-10">
<span class="fs-8 pb-3 text-muted">BUSINESS</span>
<h5 class="text-primary text-capitalize fs-3 fw-bold mb-1">
${content.business?.name}
</h5>
<p class="m-0">by ${ content.business?.user?.name ?? 'Satt Academy' }</p>
<div class="d-flex mt-2 gap-2 justify-content-between align-items-end">
<div class="d-flex align-items-center gap-2">
<span class="badge badge-secondary">${content.business?.books_count} books</span>
<span class="badge badge-secondary">${content.business?.courses_count} courses</span>
<span class="badge badge-secondary">${content.business?.exams_count} exams</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
if (content.content_footer) {
if(content.content_footer.startsWith('<')) {
card += `<div>
${content.content_footer}
</div>`;
} else {
card += `<div class="text-center text-dark p-3" style="border-top: 1px solid #999;">
${content.content_footer}
</div>`;
}
}
card += `</div>`;
return card;
}
function handlePromotionCardClick(url, withLink, id, countClick) {
// 1. Check if the user agent belongs to a Google crawler
const isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
// 2. Only proceed if it's NOT a google bot AND the URL is valid
if (!isBot && url && url != '' && url != '#' && url != 'null' && withLink) {
// Construct the tracking URL
let urlToGo = `/promotion-link?id=${id}&countClick=${countClick}&_token=VwxzWhoJbGoUdjHujxQ6BsZKVDzApKztmbHND5eo`;
console.log(urlToGo);
window.open(urlToGo, '_blank');
} else if (isBot) {
// If it's a bot, we can optionally redirect directly to the target URL
// to help indexing, or simply do nothing.
console.log('Crawler detected: Blocking tracking redirect.');
}
}
function convertToEmbedUrl(videoUrl) {
// YouTube URL patterns
const youtubePattern1 = /youtube\.com\/watch\?v=([^&]+)/;
const youtubePattern2 = /youtu\.be\/([^?]+)/;
// Vimeo URL pattern
const vimeoPattern = /vimeo\.com\/(\d+)/;
// Facebook URL pattern
const facebookPattern = /facebook\.com\/.+\/videos\/(\d+)/;
// Check for YouTube URL (full or shortened)
let match = videoUrl.match(youtubePattern1) || videoUrl.match(youtubePattern2);
if (match) {
const videoId = match[1];
return `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
}
// Check for Vimeo URL
match = videoUrl.match(vimeoPattern);
if (match) {
const videoId = match[1];
return `https://player.vimeo.com/video/${videoId}`;
}
// Check for Facebook URL
match = videoUrl.match(facebookPattern);
if (match) {
const videoId = match[1];
return `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}`;
}
// Return the original URL if it's not a valid YouTube or Vimeo URL
return videoUrl;
}
</script>
<div x-data="promotionManager" x-cloak>
<template x-teleport="body">
<div x-show="modalOpen" x-cloak class="fixed inset-0 z-[9999] flex items-center justify-center p-4" @keydown.escape.window="closeModal()">
<div x-show="modalOpen" x-transition.opacity @click="closeModal()" class="absolute inset-0 bg-black/60"></div>
<div x-show="modalOpen"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-95 translate-y-4"
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.outside="closeModal()"
class="relative w-full max-w-2xl m-4 overflow-hidden rounded-2xl shadow-2xl" style="background-color: transparent;">
<button @click="closeModal()" type="button" aria-label="Close promotion"
class="promotion-close-btn promotion-modal-close-btn absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
</svg>
</button>
<div class="modal-content" style="background-color: transparent">
<div class="promotion-body" x-html="modalContent"></div>
</div>
</div>
</div>
</template>
<template x-teleport="body">
<div x-show="offcanvasOpen" x-cloak class="fixed inset-0 z-[9999]">
<div x-show="offcanvasOpen" x-transition.opacity @click="offcanvasOpen = false" class="absolute inset-0 bg-black/60"></div>
<div x-show="offcanvasOpen"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed bg-white shadow-xl overflow-y-auto"
:class="offcanvasPositionClasses">
<div class="offcanvas-header flex items-center justify-between p-4 border-b border-gray-200">
<h5 class="offcanvas-title text-lg font-semibold text-gray-900">Promotion</h5>
<button @click="offcanvasOpen = false" type="button" class="promotion-close-btn btn-close p-0 border-0 bg-transparent text-gray-500 hover:text-gray-700 text-2xl leading-none">×</button>
</div>
<div class="offcanvas-body promotion-body p-4" x-html="offcanvasContent"></div>
</div>
</div>
</template>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('promotionManager', () => ({
modalOpen: false,
offcanvasOpen: false,
offcanvasPosition: 'right',
modalContent: '',
offcanvasContent: '',
promotionModalShownRoutes: {},
init() {
this.promotionModalShownRoutes = this.parseSessionStorage();
this.insertInnerPromotionContainers();
setTimeout(() => {
this.loadPromotionData();
setTimeout(() => {
this.initVideoObserver();
}, 500);
}, 2500);
},
parseSessionStorage() {
try {
let stored = sessionStorage.getItem('promotionModalShownRoutes');
return stored ? JSON.parse(stored) : {};
} catch {
return {};
}
},
get offcanvasPositionClasses() {
const pos = this.offcanvasPosition;
return {
'top-0 right-0 h-full w-80 max-w-full': pos === 'right',
'top-0 left-0 h-full w-80 max-w-full': pos === 'left',
'top-0 left-0 w-full h-80 max-h-full': pos === 'top',
'bottom-0 left-0 w-full h-80 max-h-full': pos === 'bottom',
};
},
closeModal() {
this.modalOpen = false;
this.modalContent = '';
},
insertInnerPromotionContainers() {
let items = document.querySelectorAll('.content-list-item');
let insertAfterEach = 3;
if (items.length >= insertAfterEach) {
items.forEach((el, index) => {
if ((index + 1) % insertAfterEach === 0) {
let div = document.createElement('div');
div.className = 'inner-promotion-content';
el.parentNode.insertBefore(div, el.nextSibling);
}
});
}
},
async loadPromotionData() {
let route = "single.mcq";
let path = window.location.pathname;
let modalShown = this.promotionModalShownRoutes.hasOwnProperty(route);
let promotionsShownInModal = this.promotionModalShownRoutes[route] || [];
try {
const response = await fetch("https://sattacademy.com/dynamic-promotion-content", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
},
body: JSON.stringify({
_token: document.querySelector('meta[name="csrf-token"]').content,
route,
path,
sidebar: document.querySelector('#sidebar-promotion-content') ? 1 : 0,
inner: document.querySelectorAll('.inner-promotion-content').length,
modalShown,
promotionsShownInModal: JSON.stringify(promotionsShownInModal),
}),
});
const data = await response.json();
if (!data) return;
this.renderPromotions(data);
if (data.modalContents?.length) {
this.showModal(data, route);
}
if (data.offcanvasContents?.length) {
this.showOffcanvas(data);
}
this.initMobileCarousel();
} catch (e) {
console.error('Promotion data fetch failed:', e);
}
},
renderPromotions(data) {
const headerEl = document.getElementById('header-promotion-content');
if (headerEl && data.headerContents?.length) {
headerEl.innerHTML = data.headerContents.map(c => card(c)).join('');
}
const footerEl = document.getElementById('footer-promotion-content');
if (footerEl && data.footerContents?.length) {
footerEl.innerHTML = data.footerContents.map(c => card(c)).join('');
}
const sidebarEl = document.getElementById('sidebar-promotion-content');
if (sidebarEl && data.sidebarContents?.length) {
sidebarEl.innerHTML = data.sidebarContents.map(c => card(c)).join('');
}
if (data.innerContents?.length) {
let innerEls = document.querySelectorAll('.inner-promotion-content');
data.innerContents.forEach((content, index) => {
if (innerEls[index]) {
innerEls[index].innerHTML = card(content);
}
});
}
},
showModal(data, route) {
let modalCards = '';
const ms = data.modalSettings;
if (ms?.show_modal_header_and_footer && ms.modal_header) {
modalCards += `<div class='text-center'>${ms.modal_header}</div>`;
}
if (!this.promotionModalShownRoutes[route]) {
this.promotionModalShownRoutes[route] = [];
}
data.modalContents.forEach(content => {
modalCards += card(content);
if (!this.promotionModalShownRoutes[route].includes(content.id)) {
this.promotionModalShownRoutes[route].push(content.id);
}
});
if (ms?.show_modal_header_and_footer && ms.modal_footer) {
modalCards += `<div class='text-center'>${ms.modal_footer}</div>`;
}
this.modalContent = modalCards;
this.modalOpen = true;
sessionStorage.setItem('promotionModalShownRoutes', JSON.stringify(this.promotionModalShownRoutes));
},
showOffcanvas(data) {
let positions = ['left', 'right'];
this.offcanvasPosition = positions[Math.floor(Math.random() * positions.length)];
let cards = '';
data.offcanvasContents.forEach(c => { cards += card(c); });
this.offcanvasContent = cards;
this.offcanvasOpen = true;
},
initMobileCarousel() {
if (!window.matchMedia('only screen and (max-width: 767px)').matches) return;
['header-promotion-content', 'footer-promotion-content'].forEach(id => {
const el = document.getElementById(id);
if (el && el.children.length > 1) {
el.style.display = 'flex';
el.style.flexWrap = 'nowrap';
el.style.overflowX = 'auto';
el.style.scrollSnapType = 'x mandatory';
el.style.scrollBehavior = 'smooth';
el.style.WebkitOverflowScrolling = 'touch';
Array.from(el.children).forEach(child => {
child.style.flex = '0 0 100%';
child.style.scrollSnapAlign = 'start';
});
}
});
},
initVideoObserver() {
const videos = document.querySelectorAll('video.promoted-video');
if (!videos.length) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const video = entry.target;
if (entry.isIntersecting) video.play();
else video.pause();
});
}, { root: null, rootMargin: '0px', threshold: 0.5 });
videos.forEach(video => observer.observe(video));
},
}));
});
</script>
</body>
</html>
